<template>
    <div class="header">
        <div class="l-context" style="color: white;">
            <el-button @click="headerMenu" icon="el-icon-menu" size="mini"></el-button>
            <el-breadcrumb separator-class="el-icon-arrow-right" style="color: white;">
                <el-breadcrumb-item 
                v-for="item in tags" 
                :key="item.label" 
                :to="{ path: item.path }">
                    {{item.label}}
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="r-context">
            <el-dropdown>
                <span class="el-dropdown-link">
                    <img class="user" src="../assets/logo.png">
                </span>
                <el-dropdown-menu slot="dropdown" >
                    <el-dropdown-item>用户信息</el-dropdown-item>
                    <el-dropdown-item @click.native="logOut">退出</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
    </div>  
</template>
<script>
import { mapState } from 'vuex';
export default {
    methods:{
        headerMenu(){
            this.$store.commit('isCollMenu')
        },
        closeNav(){
            console.log(123);
        },
        logOut(){
            window.sessionStorage.clear();
            this.$store.commit('clearMenuList')
            this.$router.push("/");     
        }
    },
    computed:{
        ...mapState({
            tags: state => state.tab.menuList
        })
    }
}
</script>

<style lang="less" scoped>
.header{
    display: flex;
    height: 100%;
    justify-content: space-between; 
    align-items: center;
}
.l-context{
    display: flex;
    align-content: center;
    color: white;
    .el-button{
        height: 50%;
        margin-right: 20px;
    }
}
.r-context{
    .user{
        width: 35px;
        height: 35px;
        border-radius: 50%;
    }
}
.el-breadcrumb{
    line-height: 28px;
}

/deep/.el-breadcrumb__item:last-child .el-breadcrumb__inner{
    color: white;
}
/deep/.el-breadcrumb__inner.is-link{
    color: white;
}
</style>